<template>
	<view class="si_liao_box" :style="{height: windowHeight + 'px'}">
		<!-- 标题 -->
		<view class="title_box pv_20 text_center flex_column_between">
			<view class="title1">
				<text class="title vertical_text mn fs_36_i mainColor">ᠪᠣᠷᠳᠤᠭᠠᠨ᠎ᠤ ᠬᠠᠮᠢᠶᠠᠷᠤᠯᠲᠠ</text>
			</view>
			<view class="title2">
				<text class="title vertical_text mn fs_36_i color_000" @click="goToSiLiaoPeiFang()">ᠪᠣᠷᠳᠤᠭᠠᠨ᠎ᠤ ᠨᠠᠢᠷᠠᠯᠭ᠎ᠠ</text>
			</view>
		</view>
		
		<view class="content_box">
			<!-- 2023 年 -->
			<view class="year_box ph_10">
				<view class="year_num">
					<text>2023</text>
				</view>
				<view class="year_text">
					<text class="vertical_text mn fs_36_i color_000">ᠣᠨ</text> 
				</view>
				<view class="xia_la_icon">
					<i class="iconfont icon-xiala color_ccc fs_20_i" @click="selectYear()"></i>
				</view>
			</view>
			
			<!-- 总重量 采购记录 总支出 -->
			<view class="box_1 flex_row_around">
				<view class="box_item flex_row_around">
					<text class="name vertical_text mn fs_40">ᠶᠡᠷᠦᠩᠬᠡᠢ ᠬᠦᠨᠳᠦᠴᠡ </text>
					<text>:</text>
					<text>125kg</text>
				</view>
				
				<view class="box_item flex_row_around">
					<text class="name vertical_text mn fs_40">ᠬᠤᠳᠠᠯᠳᠤᠨ ᠠᠪᠤᠭᠰᠠᠨ ᠲᠡᠮᠳᠡᠭᠯᠡᠯ </text>
					<text>:</text>
					<text>3</text>
				</view>
				
				<view class="box_item flex_row_around">
					<text class="name vertical_text mn fs_40">ᠶᠡᠷᠦᠩᠬᠡᠢ ᠵᠠᠷᠤᠯᠭ᠎ᠠ </text>
					<text>:</text>
					<text>￥2356</text>
				</view>	
			</view>
		
			<!-- 添加饲料 -->
			<view class="add_si_liao w_full h_100 lh_100 text_center bgc_fff border_radius_10 mt_20 pv_10 border_box">
				<text class="vertical_text mn fs_40 h_full lh_40 ws_normal mainColor" @click="goToAddSiLiao()">ᠪᠣᠷᠳᠤᠭ᠎ᠠ ᠨᠡᠮᠡᠬᠦ</text>
			</view>
			
			<!-- 饲料记录 -->
			<view class="si_liao_list_box">
				<view class="si_liao_list">
					<view class="month_box ph_10">
						<view class="month_num">
							<text class="num">6</text> 
							<text class="vertical_text mn fs_40 ">ᠰᠠᠷ᠎ᠠ</text>
							<text class="num">4</text>   
							<text class="vertical_text mn fs_40 ">ᠡᠳᠦᠷ</text>
						</view>
					</view>
					
					<!-- 当日 总重量 采购记录 总支出 -->
					<view class="day_box flex_row_around">
						<view class="box_item flex_row_around">
							<text class="name vertical_text mn fs_38">ᠶᠡᠷᠦᠩᠬᠡᠢ ᠬᠦᠨᠳᠦᠴᠡ </text>
							<text>:</text>
							<text>125kg</text>
						</view>
						
						<view class="box_item flex_row_around">
							<text class="name vertical_text mn fs_38">ᠬᠤᠳᠠᠯᠳᠤᠨ ᠠᠪᠤᠭᠰᠠᠨ ᠲᠡᠮᠳᠡᠭᠯᠡᠯ </text>
							<text>:</text>
							<text>3</text>
						</view>

						<view class="box_item flex_row_around">
							<text class="name vertical_text mn fs_38">ᠶᠡᠷᠦᠩᠬᠡᠢ ᠵᠠᠷᠤᠯᠭ᠎ᠠ </text>
							<text>:</text>
							<text>￥2356</text>
						</view>	
					</view>
					
					<!-- 饲料 item -->
					<view class="si_liao_item flex_row_between">
						<view class="img_box">
							<image src="../../static/img/LOGO.png" mode=""></image>
						</view>
						
						<view class="content_box p_10 border_box flex_row_between">
							<!-- 饲料名称 -->
							<view class="si_liao_name w_20_p">
								<text class="h_140 text_center ws_normal vertical_text mn fs_36">ᠪᠣᠷᠳᠤᠭᠠᠨ᠎ᠤ ᠨᠡᠷᠡᠢᠳᠦᠯ</text>
							</view>
							
							<!-- 饲料信息 -->
							<view class="si_liao_info w_80_p flex_row_around">
								<text class="h_120 text_center ws_normal vertical_text mn color_ccc fs_36">ᠨᠡᠢᠲᠡ 120 kg</text>
								<text class="h_120 text_center ws_normal vertical_text mn color_ccc fs_36">85 kg ᠦᠯᠡᠳᠡᠵᠡᠢ</text>
								
								<text class="h_120 text_center ws_normal vertical_text mn color_ccc fs_36">3 ᠵᠦᠢᠯ᠎ᠦᠨ ᠨᠠᠢᠷᠠᠯᠭ᠎ᠠ ᠬᠡᠷᠡᠭᠯᠡᠪᠡ</text>
								<text class="h_120 text_center ws_normal vertical_text mn color_ccc fs_36">4 ᠡᠳᠦᠷ ᠭᠦᠶᠴᠡᠨ᠎ᠡ</text>
							</view>
						</view>
					</view>
				
				</view>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	import getSystemInfo from '../../mixins/basic.js'
	import NET from '@/utils/request.js'
	import API from '@/config/api.js'
	
	export default {
		mixins: [getSystemInfo],
		data() {
			return {
				
			}
		},
		onLoad(options) {
			// 获取设备高度
			this.getSystemHeight()
		},
		methods: {
			// 前往添加饲料页面
			goToAddSiLiao() {
				uni.navigateTo({
					url: `/subcontract/breed-archive/add-si-liao`,
				})
			},
			
			// 前往饲料配方页面
			goToSiLiaoPeiFang() {
				uni.navigateTo({
					url: `/subcontract/breed-archive/si-liao-pei-fang`,
				})
			},
			
		}
	}
</script>

<style lang="less" scoped>
	
	.si_liao_box {
		width: 100%;
		// border: 1px solid #f00;
		box-sizing: border-box;
		position: relative;
		
		// 标题
		.title_box {
			width: 80rpx;
			height: 100%;
			box-sizing: border-box;
			position: relative;
			float: left;
			
			.title1, .title2 { font-weight: 500 !important; }
			.title1 {}
			.title2 {
				width: 100%;
				height: 50%;
				text-align: center;
				// background-color: #1c9aa0;
				border-radius: 10rpx;
				
				text { text-align: center; }
			}
		}
		
		.content_box {
			width: calc(100% - 80rpx);
			height: 99%;
			margin-left: 80rpx;
			background-color: #f7f7f7;
			// border: 1px solid #f00;
			padding: 10rpx;
			box-sizing: border-box;
			
			// 2023 年
			.year_box {
				width: 100%;
				height: 60rpx;
				line-height: 60rpx;
				
				.year_num, .year_text, .xia_la_icon {
					float: left;
				}
			}
			
			// 总重量 采购记录 总支出
			.box_1 {
				width: 100%;
				height: 140rpx;
				line-height: 100rpx;
				padding: 10rpx 0;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 10rpx;
				
				.box_item {
					width: 26%;
					height: 100%;
					
					text { height: 100%; text-align: center; white-space: normal; }
					.name { line-height: 36rpx; }
				}
			}
		
			// 添加饲料按钮
			.add_si_liao {}
			
			// 饲料列表
			.si_liao_list_box {
				width: 100%;
				height: calc(100% - 340rpx);
				// border: 1px solid #f00;
				margin-top: 15rpx;
				
				.si_liao_list {
					width: 100%;
					padding: 10rpx;
					box-sizing: border-box;
					
					// 几月几号
					.month_box {
						width: 100%;
						height: 40rpx;
						
						.month_num {
							width: 100%; height: 100%;
							
							.num { padding: 0 10rpx; }
							text { height: 100%; text-align: center; white-space: normal;}
						}
					}
					
					// 当日 总重量 采购记录 总支出
					.day_box {
						width: 100%;
						height: 80rpx;
						padding: 10rpx;
						box-sizing: border-box;
						margin-top: 20rpx;

						.box_item {
							width: 28%; 
							height: 100%;
							
							text { height: 100%; text-align: center; white-space: normal; }
						}
					}
					
					// 饲料item
					.si_liao_item {
						width: 100%;
						height: 160rpx;
						margin-top: 20rpx;
						// border: 1px solid #f00;

						.img_box {
							width: 160rpx;
							height: 160rpx;
							// border: 1px solid #f00;
							image { width: 100%; height: 100%; border-radius: 8rpx; }
						}
						
						.content_box {
							width: calc(100% - 160rpx);
							height: 100%;
							margin-left: 0;
							padding: 10rpx;
							box-sizing: border-box;
						}
					}
				}
				
				
			}
		}
	}
</style>

<style lang="less">
	@import url('~@/static/css/plugin.css');
</style>
